<template>
  <!-- 图数据预览 -->
  <div id="data-preview-table" class="graph-data-preview-card">
    <pre
      v-if="graphFileFormat === 'json' || graphFileFormat === 'gml'"
      class="json-gml-preview"
    >
      {{ graphPreviewData }}
    </pre>
    <data-preview-table
      v-else
      :head="graphPreviewData.head"
      :data="graphPreviewData.data"
      data-type="graph"
      :enable-col-type="false"
      :enable-semantic="false"
    >
    </data-preview-table>
  </div>
</template>

<script lang="ts">
/**
 * 图数据导入 图数据预览
 * @author Jinhui Hou
 */
import { Component, Vue } from 'vue-property-decorator'
import DataPreviewTable from '@/components/data/DatasetPreviewTable.vue'
import DataUploadStore from '@/store/modules/data-upload'

@Component({
  components: {
    DataPreviewTable,
  },
})
export default class GraphDataPreview extends Vue {
  // 图文件格式
  public get graphFileFormat() {
    return DataUploadStore.graphFileFormat
  }
  // 图文件预览数据
  public get graphPreviewData() {
    return DataUploadStore.graphPreviewData
  }
}
</script>
<style lang="less" scoped>
.graph-data-preview-card {
  .json-gml-preview {
    border: 1px solid #e9e9e9;
    max-height: 450px;
    overflow: auto;
  }

  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }
}
</style>
